<template>
 
    <div class="item" @click="newsClick">
      <div class="title"><slot name="title"></slot></div>
      <div class="date"><slot name="date"></slot></div>
      <div class="content"><slot name="content"></slot></div>
    </div>
  
</template>

<script>

  export default {
    props:{
      itemInfo:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    data() {
      return {
        
      }
    },
   
    methods: {
      newsClick(){
        let urlDetail = '/detail/' + this.itemInfo.id
        console.log(urlDetail);
        // this.$emit('newsClick', urlDetail)
        // this.$router.push('/detail/' + this.itemInfo.id)
        this.$router.push(urlDetail)
        this.$router.go(0)
      }
    },
  }
</script>

<style lang="less" scoped>
.item{
  padding: 20px;
  border-bottom: 1px solid #cecece;
}
.title{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  padding-bottom: 2px;
}
.title:hover{
  color: rgb(81, 191, 224);
}
.date{
  font-size: 12px;
  color: #bbb7b7;
}
.content{
  font-size: 14px;
  line-height: 18px;
  margin-top: 2px;
}
</style>